import { useMemo } from 'react';
import { InbizIcon } from '@inbiz/utils';
import defaultImg from './img/defaultImg.svg';
export default function ProcessIcon(props: any) {
  const { processIconInfo, iconbaseType, style, imgStyle } = props;

  const iconInfo = useMemo(() => {
    if (processIconInfo === 'font_family') {
      //默认图标
      return {
        type: 'icon',
        color: '#fc9637',
        icon: 'icon-process-morentubiao',
      };
    } else {
      if (processIconInfo?.startsWith('v6_font_family')) {
        if (processIconInfo?.indexOf('/') == -1) {
          //v6图标
          let iconArr = processIconInfo?.split(' ');
          let icon = '';
          let color = '';
          iconArr?.map((item: string) => {
            if (item.startsWith('icon')) {
              icon = item;
            }
            if (item.startsWith('rgba')) {
              color = item;
            }
          });
          return {
            type: 'icon',
            color,
            icon,
          };
        } else {
          //v6图片
          let _iconInfo = '';
          let _iconInfoArr = processIconInfo?.split('/');
          _iconInfoArr = _iconInfoArr?.map((item: string | string[]) => {
            if (item?.indexOf('{') != -1) {
              return window.inbiz?.appInfo?.AppId;
            } else {
              return item;
            }
          });
          _iconInfo = _iconInfoArr?.join('/');
          let _url = _iconInfo?.split(' ')?.filter((item) => {
            if (item?.startsWith('/')) {
              return true;
            } else {
              return false;
            }
          })?.[0];
          return {
            type: 'img',
            url: _url,
          };
        }
      } else if (
        processIconInfo?.startsWith('font_family') ||
        processIconInfo?.startsWith('http') ||
        processIconInfo?.startsWith('https')
      ) {
        if (processIconInfo?.startsWith('font_family')) {
          //v5图标
          let icon = '';
          let color = '';
          let __iconInfoArr = processIconInfo?.split(' ');
          __iconInfoArr?.map((item1: string) => {
            if (item1?.startsWith('icon')) {
              if (item1?.indexOf('_') > -1) {
                icon = item1;
              } else {
                let _icon = item1.split('-');
                icon = _icon[0] + '-inbiz_process-' + _icon[1];
              }
            }
            if (item1?.startsWith('#') || item1?.startsWith('rgb')) {
              color = item1;
            }
          });
          return {
            type: 'icon',
            color,
            icon,
          };
        } else {
          //v5图片
          return {
            type: 'img',
            url: processIconInfo,
          };
        }
      } else {
        //默认图标
        return {
          type: 'icon',
          color: '#fc9637',
          icon: 'icon-process-morentubiao',
        };
      }
    }
  }, [processIconInfo, iconbaseType, style, imgStyle]);

  if (iconInfo?.type == 'img') {
    return (
      <img
        src={iconInfo?.url}
        alt=""
        style={{ width: 25, height: 25, marginRight: 15, ...imgStyle }}
        onError={(e) => {
          e.target.onerror = null;
          e.target.src = defaultImg;
        }}
      />
    );
  } else {
    return (
      <InbizIcon
        style={{
          fontSize: 25,
          marginRight: 15,
          color: iconInfo.color || '#fc9637',
          ...style,
        }}
        type={iconInfo.icon || 'icon-process-morentubiao'}
      />
    );
  }
}
